<template>
  <div ref="viewRef" class="virtual-scroll-div_wrapper" @wheel="fn.handleScroll">
    <div ref="realListRef" class="vt-div-inner">
      <div v-for="(item,index) in state.list" class="item">
        {{ item }}
      </div>
    </div>
  </div>
  <div class="debug">
    <div>
      {{state.mouse_e}}
    </div>
    <div>
      123
    </div>
  </div>

</template>

<script>
import {computed, defineComponent, onMounted, onUpdated, reactive, ref} from "vue"
import _ from 'lodash';

export default defineComponent({
  name: 'virtual-scroll-div',
  setup() {
    // 实际列表
    const realListRef = ref(null)
    // 可视窗口元素
    const viewRef = ref(null)
    const state = reactive({
      list: [
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12
      ],
      mouse_e:null,
    })
    // 列表实际高度
    let realHeight = computed(() => {
      return realListRef.value.clientHeight || 0
    })
    // 可视高度
    let viewHeight = computed(() => {
      return viewRef.value.clientHeight || 0
    })

    // 可视高度/实际高度
    let viewPercent = computed(() => {
      let num = _.floor(viewHeight.value / realHeight.value * 100, 2)
      console.log('num', num)
      return num
    })


    const fn = {
      handleScroll($event) {
        state.mouse_e = JSON.stringify({
          deltaY:$event.deltaY,
          pageY:$event.pageY,
          offsetTop:$event.offsetTop,
        })
        console.log('$event', $event.deltaY)
      }
    }


    console.log('viewPercent', viewPercent)
    console.log('realHeight', realHeight)
    onUpdated(() => {
      console.log('realListRef', realListRef.value)
      console.log('realHeight', realHeight.value)
      console.log('viewPercent', viewPercent)
    })
    return {
      state,
      realListRef,
      viewRef,
      fn
    }
  },
})
</script>

<style lang='scss' scoped>
.virtual-scroll-div_wrapper {
  width: 300px;
  height: 200px;
  overflow-y: auto;

  .item {
    width: 100px;
    height: 30px;
    background-color: #eee;
    margin: 5px;
  }
}
</style>
